<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <!-- 
    表单标签，是用户和页面之间交互的重要手段
    大部分的html标签都是给用户“展示”
    表单标签，是让用户来“输入”
  -->

  <form>
    <!--单行文本框 -->
    <input type="text"> <br>
    <input type="password"> <br>

    <!-- 单选框  radio:单选框  name:同一类别  checked:默认选中-->
    <input type="radio" name="gender" checked="checked" id="male">
    <label for="male">男</label>

    <!-- 通过lable 标签 for和id 进行关联上， 点击文字也可以选中 -->
    <input type="radio" name="gender" id="female">
    <label for="female">女</label>

    <!-- 多选框 checked:多选框 -->
    <input type="checkbox">Vue
    <input type="checkbox">c++
    <input type="checkbox" checked="checked">Java
    <input type="checkbox">Go
    <input type="checkbox">Python

    <!-- 按钮  button:按钮 value:按钮名字显示 onclik:点击后，显示双引号的内容-->
    <input type="button" value="这是一个按钮一" onclick="alert('hello')">
    <button onclick="alert('hello')">这是按钮二,用的比较多</button><br>

    <!-- 选择文件 file:选择文件-->
    <input type="file">

  </form>
</body>

</html>